<template>
    <div>
        <h1>Sprint Boot + MySql + Vue</h1>
        <router-link to="/add">新增</router-link>
        <button @click="getData()">刷新</button>
        <table>
            <tr>
                <td>LogonId</td>
                <td>编辑</td>
                <td>删除</td>
            </tr>
            <tr v-for="item in accountData" :key="item.userId">
                <td>{{item.logonId}}</td>
                <td>
                    <router-link :to="{path:'/edit',query:{UserId:item.userId}}">编辑</router-link>
                </td>
                <td>删除</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                accountData : ""
            };
        },
        methods:{
            getData(){
                this.$axios.post("/getAllAccount")
                    .then(response => {
                        this.accountData = response.data;
                        console.log(response);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>
table{
    border-collapse: collapse;
}
td,th{
    border:1px solid #000;
}
</style>
